<template>
    <el-table
            v-loading="table.loading"
            :show-summary="table.hasShowSummary"
            :summary-method="table.getSummaries"
            ref="table"
            :data="table.data"
            tooltip-effect="dark"
            stripe
            border
            style="width: 100%;"
            :key="table.key"
            :row-class-name="rowClassName"
            :span-method="objectSpanMethod"
            header-row-class-name="thClassName"
            :highlight-current-row="table.highlight"
            :max-height="table.maxHeight"
            :row-key="table.key"
            :lazy="table.lazy"
            :tree-props="table.tree"
            :load="load"
            @selection-change="handleSelectionChange"
            @row-click="rowClick"
            @select="oneSelectionChange"
            @expand-change="expandChange"
            @sort-change="sortChange"
            >
        <el-table-column
                v-if="table.hasSelect"
                type="selection"
                width="40">
        </el-table-column>
        <el-table-column type="expand" v-if="table.hasExpand">
            <template slot-scope="scope">
                <el-table :data="table.data[scope.$index].children" :key="table.keys">
                    <el-table-column
                        v-for="item in table.expands"
                        :label="item.label"
                        align="center"
                        show-overflow-tooltip
                        :class-name="item.className"
                        :key="item.id"
                        :width="item.width ? item.width : ''"
                        :min-width="item.minWidth || ''">
                        <template slot-scope="scope">
                            <slot v-if="item.show === 'template'" :name="item.prop" :obj="scope.row"
                                :rowIndex="scope.$index">{{scope.row[item.prop]}}
                            </slot>
                            <span v-else>{{scope.row[item.prop]}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </template>


            <!-- <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item :label="item.label" v-for="item in table.expands" :key="item.id">
                        <span>{{ props.row[item.prop] }}</span>
                    </el-form-item>
                </el-form>
            </template> -->
        </el-table-column>
        <el-table-column
                v-for="item in table.labelProps"
                :label="item.label"
                align="center"
                show-overflow-tooltip
                :class-name="item.className"
                :key="item.id"
                :fixed='item.fixed'
                :width="item.width ? item.width : ''"
                :prop="item.prop"
                :sortable="item.sort || false"
                :sort-orders="['ascending', 'descending']"
                :sort-by="table.sortBy || []"
                :min-width="item.minWidth || ''">
            <template slot-scope="scope">
                <slot v-if="item.show === 'template'" :name="item.prop" :obj="scope.row"
                      :rowIndex="scope.$index">{{scope.row[item.prop]}}
                </slot>
                <span v-else>{{scope.row[item.prop]}}</span>
            </template>
        </el-table-column>
        <el-table-column
                column-key="operation"
                :label="table.operation.label"
                align="center"
                :width="table.operation.width ? table.operation.width : ''"
                :min-width="table.operation.minWidth ? table.operation.minWidth : ''"
                :class-name="table.operation.className"
                :fixed="table.operation.fixed"
                v-if="table.hasOperation">
            <template slot-scope="scope">
                <el-button
                        v-for="item in table.operation.data"
                        :class="item.classname ? item.classname : ''"
                        :key="item.id"
                        :size="item.size"
                        type="text"
                        @click.stop="handleOperation(scope.$index, scope.row, item.id)">{{ item.label }}
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: 'recordlist',
        props: {
            table: {
                type: Object,
                default() {
                    return {
                        key: 1, //表格key,多次赋值，可确保table渲染
                        keys:1,
                        hasMergeRowOrColumn: false, // 是否合并单元格
                        loading: false,          // 加载中动画
                        hasShowSummary: false,   // 是否显示表位合计行
                        hasSelect: false,        // 有无选中功能
                        hasOperation: false,     // 有无操作功能
                        hasExpand: false,        // 有无展开行功能
                        hasClickEvent: false,        // 有无选中当前行的事件功能
                        highlight: true,         //高亮当前行
                        maxHeight: '',
                        tree:{},
                        sortBy:[],
                        labelProps: [                    // 定义表格数据对应字段 —— className:列的class名
                            {
                                id: '1',
                                label: 'label',
                                prop: 'prop',
                                className: 'classname',
                                sort:false,
                                minWidth: '80',
                                fixed:null,
                                show: false           // show有三种值：false常规表格列，hidden隐藏当前列，template自定义表格列
//          <template slot-scope="props" slot="example">
//                <a class="list-a" target="_blank" :href="'/#/bombscreen?mobile=' + props.obj.row.mobile">{{ props.obj.row.username }}</a>
//          </template>
                            }
                        ],
                        // 表格数据 —— 如需添加行class，处理数据时则需要传入class名， class需为数组
                        data: [],
                        operation: {             // 操作功能
                            label: '操作',                // 操作列的行首文字
                            width: '200',                // 操作列的宽度
                            className: '',               // 操作列的class名
                            fixed: false,              // 操作列是否固定，默认为不固定，值可为：left、right、true(左边)
                            data: [                      // 操作列数据
                                {
                                    label: '通过',                // 按钮文字
                                    Fun: 'handleSubmit',         // 点击按钮后触发的父组件事件
                                    size: 'mini',                // 按钮大小
                                    id: '1',                     // 按钮循环组件的key值
                                    classname: 'show'            // 按钮的类名
                                }
                            ]
                        },
                        expands: [               // 展开行数据
                            {
                                id: '1',
                                label: 'label',
                                prop: 'prop'
                            }
                        ],
                        getSummaries(param) {               // 自定义表位合计行数据
                            // *** 此函数传入param参数
                            console.log(param);
                            // *** 最后返回一个数组，合计行会显示数组中的内容
                            return []
                        }
                    }
                }
            }
        },
        data() {
            return {
                //当前选中行数据的下标
                currentDataIndex: []
            }
        },
        methods: {
            sortChange(item,prop,order) {
                this.$emit('sortChange',item)
            },
            load(tree, treeNode, resolve) {
                this.$emit('treeNode',tree, treeNode, resolve)
            },
            expandChange(row) {
                this.table.data.forEach((item,index) =>{
                    if(item.id === row.id) {
                        this.$emit('expandChange',index,row);
                    }
                })
            },
            handleSelectionChange(val) {
                this.currentDataIndex = [];
                if (val.length) {
                    val.forEach(ele => {
                        this.currentDataIndex.push(this.table.data.indexOf(ele));
                    })
                }
                this.$emit('onHandleSelectionChange', val, this.currentDataIndex);

            },
            handleOperation(a, b, id) {
                const data = this.table.operation.data;
                for (let i = 0; i < data.length; i++) {
                    if (id === data[i].id) {
                        this.$emit(data[i].Fun, a, b);
                    }
                }
            },
            oneSelectionChange(selection, ) {
                //控制单选
                // if (selection.length > 1) {
                //     selection.splice(0, 1)
                // }
                this.$emit('oneSelectionChange', selection);
            },
            //合并行/列，返回包含行数和列数的对象
            objectSpanMethod({row, column, rowIndex, columnIndex}) {
                if (!this.hasMergeRowOrColumn) {
                    return
                } else {
                    this.$emit('onMergeRowOrColumn', {row, column, rowIndex, columnIndex});
                }
            },
            // 点击某一行时触发的函数
            // *** 按下左键然后移动鼠标到其它列放开左键，会有报错 -- 优化：添加点击行参数，
            rowClick(Row, Event, Column) {
                if (!this.table.hasClickEvent) return;
                if (!Column || Column.type === 'selection' || Column.columnKey === 'operation' || Column.type === 'expand') {
                    return
                }
                let index = this.table.data.indexOf(Row);
                const data = {
                    row: Row,
                    event: Event,
                    column: Column,
                    index
                };

                this.$emit('onRowClick', data)
            },
            // 行类名的回调函数
            // 在表格数据中添加class字段即为表格行类名，配合css可对表格行中的自定义标签进行样式优化
            rowClassName(row,) {
                if (this.table.isml10 === true) {
                    if (row.rowIndex !== 0) {
                        return 'ml10';
                    }
                    return '';
                } else {
                    return '';
                }

            },
            change(){
                this.$forceUpdate();
            }
        },
        mounted() {
            //表格体的高度
            this.$nextTick(() => {
                let height = this.$refs.table.$el.children[1].clientHeight;
                if(height > 0) {
                    document.querySelector('.el-table .el-table__body-wrapper').style.height = `calc(100% - ${height}px)`;
                }
                
            })
        },
    }
</script>

<style scoped lang="scss">
    .el-button--text {
        min-width: 0;
        padding: 0;
    }

</style>
